<template>
  <!-- 收支项目 : Revenue_and_expenditure_item -->
  <div>
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <!-- 搜索区域 -->
      <el-form
        :inline="true"
        @keyup.enter.native="searchQuery"
        style="margin: 20px"
      >
        <el-form-item label="名称">
          <el-input
            placeholder="请输入名称查询"
            v-model="queryParam.name"
          ></el-input>
        </el-form-item>
        <el-form-item label="类型">
            <el-select placeholder="请选择" v-model="queryParam.type">
                <el-option label="收入" value="收入"></el-option>
                <el-option label="支出" value="支出"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            placeholder="请输入备注"
            v-model="queryParam.remark"
          ></el-input>
        </el-form-item>
        <el-form-item
          style="margin-left: 30px; overflow: hidden"
          class="table-page-search-submitButtons"
        >
          <el-button type="primary" @click="searchQuery">查询</el-button>
          <el-button style="margin-left: 8px" @click="searchReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table-operator" style="margin-top: -15px; margin-left: 20px">
      <el-button type="primary" icon="el-icon-plus" @click="handlAdd">新增</el-button>
      &nbsp;
      <el-dropdown>
        <el-button style="margin-left:10px;">
          批量操作<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item icon="el-icon-delete" @click.native="batchDel">删除</el-dropdown-item>
          <el-dropdown-item icon="el-icon-success" @click.native="batchSetStatus('true')">启用</el-dropdown-item>
          <el-dropdown-item icon="el-icon-error" @click.native="batchSetStatus('false')">禁用</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>

    <!-- 表格 -->
    <div class="table">
      <el-table :data="inOutItemList" @selection-change="handleSelectionChange" style="width: 97%;margin:20px;" border="1">
        <el-table-column type="selection"> </el-table-column>
        <el-table-column type="index" width="80px" label="#"></el-table-column>
        <el-table-column prop="name" label="名称">
        </el-table-column>
        <el-table-column prop="type" label="类型">
        </el-table-column>
        <el-table-column prop="remark" label="备注">
        </el-table-column>
        <el-table-column prop="sort" label="排序">
        </el-table-column>
        <el-table-column prop="enable" label="状态">
            <template slot-scope="scope">
                <el-tag v-if="scope.row.enabled" type="success">启用</el-tag>
                <el-tag v-else type="danger">禁用</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button type="text" @click="edit(scope.row)" icon="el-icon-edit">编辑</el-button>
                <el-button type="text" @click="removeById(scope.row)" icon="el-icon-delete" style="color: red;">删除</el-button>
            </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="float: right"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        >
    </el-pagination>

    <el-dialog title="收支操作" :before-close="handleClose" :visible.sync="dialogFormVisible" width="600px">
        <el-form :model="form" size="mini" :rules="rules" ref="form">
            <el-form-item label="名称:" prop="name" label-width="90px">
                <el-input v-model="form.name" style="width: 400px" placeholder="请输入名称"></el-input>
            </el-form-item>
            <el-form-item label="类型:" prop="type" label-width="90px">
                <el-select v-model="form.type" placeholder="请选择类型" style="width: 400px">
                    <el-option label="收入" value="收入"></el-option>
                    <el-option label="支出" value="支出"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="排序:" label-width="90px">
                <el-input v-model="form.sort" style="width: 400px" placeholder="请输入排序"></el-input>
            </el-form-item>
            <el-form-item label="备注:" label-width="90px">
                <el-input v-model="form.remark" type="textarea" style="width: 400px" placeholder="请输入备注"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="canle('form')">取 消</el-button>
            <el-button type="primary" @click="submitInOutItem('form')">确 定</el-button>
        </div>
    </el-dialog>

    </div>
  </div>
</template>

<script>

import inOutItemApi from '@/api/inOutItem'

export default {
    data(){
        return {
            queryParam: {
                name: '',
                type: '',
                remark: ''
            },
            item: {},
            multipleSelection: [],
            current: 1,
            limit: 5,
            total: 0,
            inOutItemList: [],
            dialogFormVisible: false,
            form: {
                id: undefined
            },
            rules: {
                name: [
                    { required: true, message: '请输入名称', trigger: 'blur' },
                    { validator: this.checkIsNameAndTypeExist, trigger: 'blur' }
                ],
                type: [
                    { required: true, message: '请选择类型', trigger: 'blur' }
                ]
            }
        }
    },
    created(){
        this.list()
    },
    methods: {
        handleClose(){
            this.$refs['form'].resetFields()
            this.form = {}
            this.dialogFormVisible = false
        },
        checkIsNameAndTypeExist(rule, value, callback){
            inOutItemApi.checkIsNameExist(this.form.name)
                .then(res => {
                    if (res.status) {
                        callback('收支名称已存在')
                    } else {
                        callback()
                    }
                })
        },
        handleCurrentChange(val){
            this.current = val
            this.list()
        },
        handleSizeChange(val){
            this.limit = val
            this.list()
        },
        handleSelectionChange(val){
            this.multipleSelection = val
        },
        searchQuery(){
            this.list()
        },
        searchReset(){
            this.queryParam = {
                name: '',
                type: '',
                remark: ''
            }
        },
        list(){
            inOutItemApi.listPage(this.current,this.limit,this.queryParam)
                .then(res => {
                    this.inOutItemList = res.data.records
                    this.limit = res.data.size
                    this.current = res.data.current
                    this.total = res.data.total
                })
        },
        removeById(row){
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                inOutItemApi.deleteById(row.id)
                    .then(res => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        })
                        this.list()
                    })
            })
        },
        batchDel() {
            if(this.multipleSelection==""){
                this.$message.warning('请至少选择一条数据进行删除！')
            }else{
                this.$confirm('此操作将永久删除该权限，是否继续？','提示',{
                    confirmButtonText:'确定',
                    cancelButtonText:'取消',
                    type:'warning',
                    center: true
                }).then(()=>{
                    // 声明空数组,这里的数组是后端需要的数据
                    let arrray=[]
                    //遍历勾选数据取自己需要的id等这里是和后端需要的参数对应
                    for(let i=0;i<this.multipleSelection.length;i++){
                        arrray.push(this.multipleSelection[i].id)//把取出的对象push到数组里
                    }
                    inOutItemApi.deleteBatch(arrray).then(res=>{ //接口
                        this.$message({
                            type: 'success',
                            message: '操作成功'
                        })
                        this.list()//删完成功后初始化查询列表
                    })
                })
            }
        },
        batchSetStatus(status) {
            this.$confirm('是否修改状态?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let arrray=[]
                //遍历勾选数据取自己需要的id等这里是和后端需要的参数对应
                for(let i=0;i<this.multipleSelection.length;i++){
                    arrray.push(this.multipleSelection[i].id)//把取出的对象push到数组里
                }
                inOutItemApi.batchSetStatus(status,arrray)
                    .then(res => {
                        this.$message({
                            type: 'success',
                            message: '修改成功!'
                        })
                        this.list()
                    })
            })
        },
        handlAdd(){
            this.form.id = undefined
            this.dialogFormVisible = true
        },
        edit(row){
            this.form = Object.assign({},this.item,row)
            this.dialogFormVisible = true
        },
        canle(form){
            this.$refs[form].resetFields()
            this.dialogFormVisible = false
            this.form = {
                id: undefined
            }
        },
        submitInOutItem(form){
            if (this.form.id === undefined) {
                this.$refs[form].validate(valid => {
                    if(valid) {
                        inOutItemApi.addInOutItem(this.form)
                            .then(res => {
                                this.$message({
                                    type: 'success',
                                    message: '添加成功'
                                })
                                this.form = {}
                                this.dialogFormVisible = false
                                this.$refs['form'].clearValidate()
                                this.list()
                            })
                    }
                })
            } else {
                inOutItemApi.updateInOutItem(this.form)
                    .then(res => {
                        this.$message({
                            type: 'success',
                            message: '修改成功'
                        })
                        this.form = {}
                        this.dialogFormVisible = false
                        this.$refs['form'].clearValidate()
                        this.list()
                    })
            }
        }
    }
};
</script>

<style>
</style>
